iT邦幫忙

2025 iThome 鐵人賽

DAY 18
0
Modern Web

從0到有做出一個商家網頁系列 第 18

Day18:CSS語法學習

  • 分享至 

  • xImage
  •  

今天要接續昨天繼續學習CSS語法

1.font-size:~;:設定文字大小

2.border:~;:在元素方塊上設定編框屬性,可以設定粗細、顏色、造型

邊框樣式:
(ㄧ)solid:實線 (二)double:雙線 (三)dotted:點線 (四)dashed:虛線

3.border-radius:~;:把邊框的線變成圓角,可以設定圓角要多圓

4.padding:~;:在元素內側加上留白間距,可以設定四邊內側留白的間距的屬性

5.margin:~;:在元素外側加上留白間距,可以設定四邊外側留白的間距的屬性

設定格式:
上下左右同距:margin: 10px(上下左右) ;
上下同值、左右同值:margin: 10px(上下) 5px(左右);`````` 上下不同值、左右同值:margin: 10px(上) 5px(左右) 2px(下); 上下同值、左右同值:margin: 10px(上) 8px(右) 2px(下) 5px(左);```

你也可以分別設定上下左右的留白,此時請使用以上語法
上方留白:margin-top:10px; padding-top:10px;
右方留白:margin-right:10px; padding-right:10px;
下方留白:margin-bottom:10px; padding-bottom:10px;
左方留白:margin-left:10px; padding-left:10px;

6.width:~;:設定元素的寬度

7.height:~;:設定元素的高度

8.text-align:~;:設定行內元素對齊位置的屬性,可以輸入代表center、left、right等位置的值

9.CSS使用的單位
px(像素)
這是構成數位影像的最小基準單位,如果以px來設定尺寸,即使瀏覽器的視窗大小改變,影像尺寸扔不變

px以外的單位
除了px以外,還有「%(百分比)」、「em」、「rem」等單位,這些單位與px不同,會隨著父元素等其他元素而改變基準

今天先到這裡明天再繼續!


上一篇
Day17:HTML以及CSS語法複習
下一篇
Day19:學習新的CSS語法和HTML語法
系列文
從0到有做出一個商家網頁30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言